<template>
    <div>
        <!-- 自动解包 -->
        <h2>{{ counter }}</h2>
        <!-- 自动解包 -->
        <h2>{{info.counter}}</h2>
        <!-- 自动解包 -->
        <h2>{{reactiveInfo.counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
</template>

<script>
import { ref,reactive } from 'vue'

export default {
    //reactive api对传入类型是有限制的,它必须要求传入一个对象或者数组类型,传入基本类型就会有警告
    //ref 相当于reactive的简化 会返回一个可变的响应式对象，该对象作为一个 响应式的引用 维护着它内部的值，这就是ref名称的来源,它内部的值是在ref的 value 属性中被维护的；
    //注意事项
    /**
     * 1.在模板中引入ref的值时，Vue会自动帮助我们进行解包操作，所以我们并不需要在模板中通过 ref.value 的方式来使用
     *2. 但是在 setup 函数内部，它依然是一个 ref引用， 所以对其进行操作时，我们依然需要使用 ref.value的方式
     */
    setup() {
        // const state = reactive({
        //     count: 0,
        // })
        const counter = ref(100)

        //将ref对象放入一个对象中
        const info = {
            counter
        }
        // 将ref对象放入reactive对象
        const reactiveInfo = reactive({
            counter
        })
        const increment = () => {
            counter.value++;
        }
        const decrement = () => {
            counter.value--;
        }
        return {
            counter,
            info,
            reactiveInfo,
            increment,
            decrement,
        }
        
    }
}
</script>

<style lang="scss" scoped>
</style>